<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script type="text/javascript"  xmlns:th="http://www.thymeleaf.org" charset="utf-8" th:inline="javascript"></script>
    <script  type="text/javascript" th:inline="javascript" src="index.js"></script>
    <title>主页</title>
    <style>
        body{
            background-image:url("https://img.17sucai.com/upload/55/2013-05-18/884aa4be28287056c7b5d6d075382c51.jpg?x-oss-process=style/big");
            background-size: 100% 100%;
        }
    </style>
</head>
<body>


<nav class="navbar default navbar-fixed-top">
    <div class="container-fluid">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="#">微闲鱼🐟</a>
        </div>

        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="/my?username=1">我的主页</a></li>
<!--            <li><a href="/my?username=1">电子产品</a></li>-->

        </ul>

        <div th:style="'display:'+((${isLogin}) ? 'none' : 'block')">
            <ul class="nav navbar-nav">
                <li><a id="login">登录</a></li>
                <li><a id="logon">注册</a></li>
            </ul>
        </div>
        <div th:style="'display:'+(!(${isLogin}) ? 'none' : 'block')">
            <ul class="nav navbar-nav">
                <li><a th:text="${username}">用户名</a></li>
                <li><a id="logout">退出</a></li>
            </ul>
        </div>
<!--        搜索-->
        <form class="navbar-form navbar-left" role="search" action="/chaxun" methed="get">
            <div class="form-group">
                <input type="text" class="form-control" id="input" autocomplete="off" name="productName">
            </div>
            <button type="submit" id="sousuo_kuan" class="btn navbar-btn">搜索</button>
        </form>



    </div>
    </div>
</nav>

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" th:class="${type}=='1'? 'active':''"><a id="ByreleaseTime" aria-controls="home" role="tab" data-toggle="tab">按发布时间排序</a></li>
    <li role="presentation" th:class="${type}=='2'? 'active':''"><a id="BylikeNum" aria-controls="profile" role="tab" data-toggle="tab">按点赞数排序</a></li>
    <li role="presentation" th:class="${type}=='3'? 'active':''"><a id="BycommentNum" aria-controls="messages" role="tab" data-toggle="tab">按评论数排序</a></li>
    <li role="presentation" th:class="${type}=='4'? 'active':''"><a id="Bylei" aria-controls="messages" role="tab" data-toggle="tab">电子类</a></li>
    <li role="presentation" th:class="${type}=='5'? 'active':''"><a id="Bylei2" aria-controls="messages" role="tab" data-toggle="tab">图书类</a></li>
</ul>
<input type="hidden" th:value="${type}" id="defaltType">
    <div class="container-fluid xianyu row">
        <div th:id="xianyuList" th:fragment="xianyuList">
            <div class="col-md-9">

                <div th:each="xianyu:${xianyus}" class="container xianyu_item">
                    <div class="row">
                        <a class="col-xs-1" th:href="'/my?username='+${xianyu.username}">
                            <img class="img-circle avatar" alt="avatar"
                                 style="height: 50px;width: 50px;margin-left: 10px;margin-top: 10px;"
                                 src="https://img.zcool.cn/community/01c8c45c1ccbd7a8012029ac24fe9e.jpg@1280w_1l_2o_100sh.jpg">
                        </a>
                        <div class="col-xs-10 avatar_right">
                            <div class="row avatar_right_top" th:text="${xianyu.username}"></div>
                            <div class="row avatar_right_bottom"><small th:text="${xianyu.dateString}"></small>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-1">
                        </div>
                        <div class="col-xs-10">
                            <div class="article" th:text="${xianyu.content}">
                            </div>
                        </div>
<!--                        <div class="col-xs-5">-->
<!--                            <div class="article" th:text="${xianyu.content}">-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                    <div class="row">
                        <div class="col-xs-1">
                        </div>
                        <div class="col-xs-10">
                            <img th:src="${xianyu.url}" onerror="this.style.display='none'" style="object-fit: scale-down; width: 200px; height: 200px">
                        </div>
                    </div>
                    <div class="row bottom">
                        <div class="col-xs-4 bottom_item">
                            <div class="col-xs-6"><img class="img-responsive" src=""></div>
                            <div class="col-xs-6"><span>转发</span></div>
                        </div>
                        <input type="hidden" th:value="${isLogin}" id="data">
                        <input type="hidden" th:value="${type}" id="type">
                        <div class="col-xs-4 bottom_item" id="comment" style="cursor:pointer" >
                            <div class="col-xs-6"><img class="img-responsive" src=""></div>
                            <div class="col-xs-6"><span th:text="${xianyu.commentNum}"></span></div>
                        </div>
                        <div class="col-xs-4 bottom_item"
                             th:onclick="'javascript:like('+${xianyu.getId()}+')'" style="cursor:pointer">
                            <div class="col-xs-6"><img class="img-responsive" src=""></div>
                            <div class="col-xs-6"><span th:text="${xianyu.likeNum}"></span></div>
                        </div>
<!--                        <div class="col-xs-4 bottom_item"-->
<!--                             th:onclick="'javascript:like('+${xianyu.getId()}+')'" style="cursor:pointer">-->
<!--                            <div class="col-xs-6"><img class="img-responsive" src=""></div>-->
<!--                            <div class="col-xs-6"><span th:text="${xianyu.type}"></span></div>-->
<!--                        </div>-->
                    </div>
                    <div th:each="comment:${xianyu.getComments()}" class="row comment1">
                        <a class="col-xs-1" th:href="'/my?username='+${comment.username}">
                            <img class="img-circle avatar" alt="avatar" style="height: 30px;width: 30px" src="https://img.zcool.cn/community/01c8c45c1ccbd7a8012029ac24fe9e.jpg@1280w_1l_2o_100sh.jpg">
                        </a>
                        <div class="col-xs-10">
                            <div class="row comment_title" th:text="${comment.username}"></div>
                            <div class="comment_text" th:text="${comment.content}">
                            </div>
                        </div>
                    </div>

                    <textarea class="textarea" placeholder="发表评论" style="margin-top: 30px" th:id="'comment_content'+${xianyu.getId()}"}> </textarea>
                    <button class="btn btn btn-default btn-sm"
                            style="margin-top: -30px;background-color: #11a3fc" th:onclick="'javascript:releaseComment('+${xianyu.getId()}+')'">发表</button>
                </div>

                <div style="position: fixed;bottom: 30px;left: 45%">
                    <a th:href="@{/index(start=0,type=${type})}">[首页]</a>
                    <a th:if="${not xianyus.isFirst()}" th:href="@{/index(start=${xianyus.number - 1},type=${type})}">[上页]</a>
                    <a th:if="${not xianyus.isLast()}" th:href="@{/index(start=${xianyus.number + 1},type=${type})}">[下页]</a>
                    <a th:href="@{/index(start=${xianyus.totalPages - 1},type=${type})}">[末页]</a>
                </div>
            </div>
        </div>



    </div>

    <div class="col-md-5">
        <textarea name="name" rows="2" cols="20" class="input" placeholder="闲置物品详细内容" id="ct"
                      style="margin-top: 70px;height: 100px;margin-left:-10px;width:400px;border: 1px solid #77ff33"></textarea>
    <img id="preview">


        <form action="/addpic" method="post" enctype="multipart/form-data" target="hideIframe">
            选择图片:<input type="text" style="width:400px;" class="form-control is-valid" id="file" name="file" >
            <input type="submit" value="确认">
        </form>
<!--        1111-->
        <form action="/addlei" method="post" enctype="multipart/form-data" target="hideIframe">
            物品类别(电子1，书籍2):<input type="text"style="width:400px;" class="form-control is-valid" id="lei" name="lei" >
            <input type="submit" value="确认">
        </form>
        <div class="row">
            <button class="btn btn btn-default btn-sm" id="addBlock"
                    style="margin-top: 30px;background-color: #11a3fc;margin-left:300px;width: 80px;height: 30px"  th:disabled="(${isLogin}) ? false : 'disabled'">发表</button>
        </div>


    <iframe id="myIframe" name="hideIframe" style="display:none;"></iframe>

    </div>

    <div>

    </div>




</body>
</html>
<style>
    body{
        padding-top: 70px;
        /*background-color: rgba(247, 247, 247, 0.09);*/
        /*background-image:url("https://img.17sucai.com/upload/55/2013-05-18/884aa4be28287056c7b5d6d075382c51.jpg?x-oss-process=style/big");*/

    }
    .xianyu{
        margin-top: 1em;

        height: 100vh;
        padding: 0px;
        position: relative;
    }
    .xianyu_item{
        margin-top: 2em;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .article{
        padding: 0 4% 1em!important;
        text-align: left!important;
    }
    .textarea{
        width: 80%;
        height: 40px;
        margin-left: 10%;
    }
    .bottom{
        height: 3em;
        line-height: 3em;
    }
    .bottom_item{
        text-align: left;
        display: inline-block;
    }
    .bottom_item img{
        width: 1.5em;
        height: 1.5em;
        margin-top: .75em;
        margin-bottom: .75em;
        display: inline;
        float: right;
        margin-right: .5em;
    }
    .avatar_right .row{
        padding-left: .8em!important;
        height: 1.8em;
        line-height: 1.8em;
        text-align: left!important;
    }
    .avatar_right_top{
        margin-top: .5em;
        color: #d74303;
        font-weight: 900;
        font-size: 1.1em;
    }
    .avatar_right_bottom{
        color: #818181;
        margin-bottom: .5em;
        font-weight: 600;
        font-size: 1em;
    }
    .comment1{
        margin-left: 30px;
        margin-top: 10px;
    }
    .comment_title{
        font-weight: 900;
        font-size: 0.6em;
    }
</style>
<script>
    $(document).ready(
        $("#login").click(function (){
            window.location.href="/login"
        }),
        $("#logon").click(function (){
            window.location.href="/logon"
        }),
        $(".isLogin").css("display","none"),
        $("#logout").click(function (){
            $.ajax({
                url: "/logout",
                type: "POST",
                success:function (result){
                    if(result === "success"){
                        alert("登出成功")
                        window.location.href="/index"
                    }
                },
                error:function (jqXHR, textStatus, errorThrown){
                    alert("错误！")
                }
            })
        }),

        $("#ByreleaseTime").click(function (){//根据发布时间获取列表
            $.ajax({
                url: "/index",
                type: "POST",
                data: {
                    "type":"1"
                },
                success: function (result) {
                    console.log(result);
                    if(result === "success"){
                        console.log("success")
                    }
                    $("#xianyuList").html(result)
                    window.location.href="/index?type=1"
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("错误！");
                }
            })
        }),

        $("#BylikeNum").click(function (){//根据点赞数获取列表
            $.ajax({
                url: "/index",
                type: "POST",
                data: {
                    "type":"2"
                },
                success: function (result) {
                    console.log(result);
                    if(result === "success"){
                        console.log("success")
                    }
                    $("#xianyuList").html(result)
                    window.location.href="/index?type=2"
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("错误！");
                }
            })
        }),

        $("#BycommentNum").click(function (){//根据评论数排序获取列表
            $.ajax({
                url: "/index",
                type: "POST",
                data: {
                    "type":"3"
                },
                success: function (result) {
                    console.log(result);
                    $("#xianyuList").html(result)
                    window.location.href="/index?type=3"
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("错误！");
                }
            })
        }),

        $("#Bylei").click(function (){//根据类别获取列表
            $.ajax({
                url: "/index",
                type: "POST",
                data: {
                    "type":"4"
                },
                success: function (result) {
                    console.log(result);
                    $("#xianyuList").html(result)
                    window.location.href="/index?type=4"
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("错误??！");
                }
            })
        }),

        $("#Bylei2").click(function (){//根据类别获取列表
            $.ajax({
                url: "/index",
                type: "POST",
                data: {
                    "type":"5"
                },
                success: function (result) {
                    console.log(result);
                    $("#xianyuList").html(result)
                    window.location.href="/index?type=5"
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("错误??！");
                }
            })
        }),


        $("#addBlock").click(function (){
            console.log($("#ct").val())
            var content=$("#ct").val()
            var formData = new FormData()
            formData.append("content", content)
            if(content.length==0){
                alert("长度不能为空！")
            }else{
                $.ajax({
                    url: "/addXianyu",
                    type: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    mimeType: "multipart/form-data",

                    success: function (result) {
                        console.log(result);
                        if(result === "success"){
                            alert("发布成功！")
                            var type = $("#type").val()
                            if( type == null){
                                window.location.href="/index?type=" + $("#defaltType").val()
                            }else {
                                window.location.href="/index?type=" + type
                            }

                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("错误！");
                    }
                })
            }
        }),
    )
</script>